<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>广告</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/formSelects/formSelects-v4.css"/>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">

                <div class="layui-inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label w-auto">广告标题:</label>
                        <div class="layui-input-inline mr0">
                            <input id="title" class="layui-input" type="text" placeholder="广告标题"/>
                        </div>
                    </div>
                </div>

                <div class="layui-inline">
                    <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>查询</button>
                    <button id="btnReset" class="layui-btn icon-btn"><i class="layui-icon">&#xe669;</i>重置</button>
                </div>

                <div class="layui-form-item audit" style="margin-top: 20px">
                    <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>新增</button>
                    <button id="btnDelete" class="layui-btn icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>
                </div>

                <div class="layui-form-item" style="margin-top: 10px">
                    <table class="layui-table" id="advertisementTable" lay-filter="advertisementTable" style="margin-top: 30px"></table>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="advertisementTableBar">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">查看</a>
    {{# if(d.status==1){ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs " id="update-class-{{d.id}}" style="display:none;" lay-event="edit">编辑</a>
    {{# }else{ }}
    <a class="layui-btn layui-btn-primary layui-btn-xs " id="update-class-{{d.id}}" lay-event="edit">编辑</a>
    {{# } }}
</script>

<!-- 表格状态列 -->
<script type="text/html" id="tableState">
    <input type="checkbox" lay-filter="ckState" value="{{d.id}}" lay-skin="switch"
           lay-text="开|关" {{d.status==1?'checked':''}}/>
</script>


<!-- 编辑 表单弹窗 -->
<script type="text/html" id="advertisementEditLayer">
    <form id="advertisementForm" lay-filter="advertisementForm" class="layui-form model-form"
          style="margin-left: 20px;height: 500px">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label class="layui-form-label">广告标题</label>
            <div class="layui-input-block">
                <input name="title" id="titleText" placeholder="请输入" type="text" class="layui-input" maxlength="10"
                       lay-verType="tips" lay-verify="required" required autocomplete="off"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">弹窗配图:</label>
            <button type="button" class="layui-btn layui-icon layui-icon-upload" id="adImg">上传图片</button>
            <font color="red">推荐尺寸:670 X 246</font>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <img class="layui-upload-img" id="adPicUrl" width="100px" >
            <input id="picUrl" name="picUrl" lay-verify="required" hidden/>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">广告内容</label>
            <div class="layui-input-block">
                <input name="type" value="4" type="radio" title="外部链接" checked="">
                <input name="type" value="3" type="radio" title="活动">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="content" id="content" lay-verify="article_desc" cols="500"></textarea>
            </div>
        </div>

        <div class="layui-form-item text-right">
            <button id="saveBtn" class="layui-btn" lay-filter="advertisementSubmit" lay-submit>保存</button>
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closePageDialog">取消</button>
        </div>

    </form>
</script>

<!-- js部分 -->
<script type="text/javascript" src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="${ctxPath}/assets/js/common.js"></script>

<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laydate', 'upload', 'jquery', 'formSelects' ,'excel','layedit'],function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var admin = layui.admin;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var formSelects = layui.formSelects;
        var layEdit = layui.layedit;


        var insTb = table.render({
            elem: '#advertisementTable',
            url: 'advertisement/list',
            page: true,
            cellMinWidth: 100,
            text: {none: '暂无数据'},
            cols: [[
                {type: 'checkbox', width: 50},
                {type: 'numbers', title: '序号'},
                {field: 'id', title: 'id' , width:50,hide: true},
                {field: 'title', title: '广告标题' },
                {
                    title: '弹窗配图',align: "center",width:150,templet: function (d) {
                        if(d.picUrl!=null && d.picUrl!=''){
                            return '<div ><img src="'+d.picUrl+'" alt="" width="200px" lay-event="showBigImage" /></div>';
                        }else{
                            return '   --    ';
                        }
                    }
                },
                {field: 'updatedDate', title: '更新时间' , width:200},
                {templet: '#tableState', title: '状态',width:90},
                {align: 'center', toolbar: '#advertisementTableBar',width: 200}
            ]]
        });


        $('#btnSearch').click(function () {
            var title = $('#title').val();
            console.log(title);
            insTb.reload({
                where: {
                    title: title
                }
            });
        });

        // 重置
        $('#btnReset').click(function () {
            $("#title").val("");
            window.location.reload();
        });

        // 新增
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 删除
        $('#btnDelete').click(function () {
            var checkStatus = table.checkStatus('advertisementTable'),
            data = checkStatus.data; //获取选中的数据
            deleteAds(data);
        });


        // 工具条点击事件
        table.on('tool(advertisementTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            switch (layEvent) {
                // 修改
                case 'edit':
                    showEditModel(data);
                    break;
                case 'details':
                    showDetailsModel(data);
                    break;
                case 'showBigImage':
                    showBigImage(data.picUrl);
                    break;
            }
        });


        //富文本编辑器 layedit

        layEdit.set({
            uploadImage: {
                url: '/upload/uploadLayeditFile',  //上传方法名
                type: 'post'
            },
            codeConfig: {
                hide: true,  //是否显示编码语言选择框
                default: 'javascript' //hide为true时的默认语言格式
            },
            tool: [ 'undo', 'redo', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'removeformat', 'fontFomatt', 'fontfamily', 'fontSize', 'fontBackColor', 'colorpicker', 'face'
            , '|', 'left', 'center', 'right', '|', 'link', 'unlink',  'image',  'attachment', '|'
            , 'table', 'customlink'
            , 'fullScreen', 'preview'
            ],
            height: '90%'
        });

        // 显示表单弹窗
        function showEditModel(ad) {
            admin.open({
                type: 1,
                area: ['800px', '550px'],
                title: (ad ? '编辑' : '新增') + '广告',
                content: $('#advertisementEditLayer').html(),
                success: function (layero, dIndex) {
                    var url = ad ? '/admin/content/advertisement/update' : '/admin/content/advertisement/add';
                    // 回显数据
                    if (ad) {

                        $('#adPicUrl').attr('src', ad.picUrl);//进行图片回显

                        form.val('advertisementForm', ad);
                    }

                    form.render();

                    //将富文本编辑器在打开弹出层之后再启用
                    var index = layEdit.build('content');
                    form.verify({
                        article_desc: function(value){
                            layEdit.sync(index);
                        }
                    });

                    //上传文件
                    upload.render({
                        elem: '#adImg',
                        url: '/upload/uploadFile',
                        accept: 'images',
                        done: function (res) {
                            if (res.msg == null) {
                                return layer.msg('上传失败', {icon: 2});
                            }
                            $('#adPicUrl').attr('src', res.msg);//进行图片回显
                            $('#picUrl').val(res.msg);
                        }
                    });
                    form.on('submit(advertisementSubmit)', function (data) {
                        var t=layEdit.getText(index);
                        console.log(t);
                        if(data.field.type==4){
                            data.field.url=t;
                        }
                        layer.close(dIndex);

                        ajaxCommon(url, data.field);

                        insTb.reload();
                        return false;
                    });
                }
            });
        }


        //放大图片
        function showBigImage(e) {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true, //点击阴影关闭
                area: [ '400px',  'auto'], //宽高
                content: '<div ><img src="'+e+'" alt="" width="400px" ></a></div>'
            });
        }


        // 修改用户状态
        form.on('switch(ckState)', function (obj) {
            layer.load(2);
            $.post('advertisement/updateState', {
                adId: obj.elem.value,
                state: obj.elem.checked ? 1 : 0
            }, function (res) {
                layer.closeAll('loading');
                if (res.code == 200) {
                    // layer.msg(res.msg, {icon: 1});
                    if(obj.elem.checked==0){
                        $("#update-class-"+obj.elem.value).css('display', '');
                    }else{
                        $("#update-class-"+obj.elem.value).css('display', 'none');
                    }
                } else {
                    layer.msg(res.msg, {icon: 2});
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'json');
        });

        //查看广告
        function showDetailsModel(ad) {
            console.log(12);
            admin.open({
                type: 1,
                area: ['800px', '550px'],
                title: '查看广告',
                content: $('#advertisementEditLayer').html(),
                success: function (layero, dIndex) {
                    $('#saveBtn,#adImg').hide();
                    $('#titleText').attr("readonly","readonly");
                    $('#content').css("display","none");
                    // 回显数据
                    if (ad) {

                        $('#adPicUrl').attr('src', ad.picUrl);//进行图片回显

                        form.val('advertisementForm', ad);

                    }

                    form.render();

                    //将富文本编辑器在打开弹出层之后再启用
                    var index = layEdit.build('content');
                    form.verify({
                        article_desc: function(value){
                            layEdit.sync(index);
                        }
                    });

                    //上传文件
                    upload.render({
                        elem: '#adImg',
                        url: '/upload/uploadFile',
                        accept: 'images',
                        done: function (res) {
                            if (res.msg == null) {
                                return layer.msg('上传失败', {icon: 2});
                            }
                            $('#adPicUrl').attr('src', res.msg);//进行图片回显
                            $('#picUrl').val(res.msg);
                        }
                    });
                    form.on('submit(advertisementSubmit)', function (data) {
                        layer.close(dIndex);

                        ajaxCommon('/admin/content/advertisement/add', data.field);

                        insTb.reload();
                        return false;
                    });
                }
            });
         }


        //删除广告
        function deleteAds(data) {
            if(data.length === 0){
                layer.msg('请选择一行');
            } else {
                layer.confirm('确定要删除' + data.length  + '条数据吗？',{
                        skin: 'layui-layer-admin'
                }, function (i) {
                        top.layer.close(i);
                        layer.load(2);
                        var adIds=getAdIds(data);
                        $.post('/admin/content/advertisement/deleteIds', {
                            adIds: adIds
                        }, function (res) {
                            layer.closeAll('loading');
                            if (res.code == 200) {
                                layer.msg(res.msg, {icon: 1});
                                setTimeout(function () {
                                    window.location.reload();
                                }, 1000);
                                //obj.del();
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                    }
                );
            }
        }

        //删除广告
        /*function deleteAds(data) {
            if(data.length === 0){
                layer.msg('请选择一行');
            } else {
                var adIds=getAdIds(data);
                console.log(adIds);
                layer.msg("删除");
            }
        }*/

        //获取删除的id
        function getAdIds(data){
            var arr = new Array();;
            for(var i = 0;i<data.length;i++){
                arr.push(data[i]['id']);
            }
            return arr.join(",");
        }


    })

</script>

</body>
</html>